<template>
<div class="moveClass" style="padding: 12px">
  <div>
    <span style="color: red">注：社区内迁移，由社区账号提交申请，系统自动审批！跨社区迁移，由区级账号提交申请，市账号审批！</span>
  </div>
  <template>
    <Select v-model="params.state" placeholder="请选择审批状态" p style="width:200px;margin-bottom: 12px;margin-right: 10px">
      <Option value="0">待审批</Option>
      <Option value="1">审批通过</Option>
      <Option value="2">审批驳回</Option>
      <Option value="3">撤销申请</Option>
    </Select>
  </template>
  <template>
    <Select v-model="params.qy_type" placeholder="请选择迁移主体类型" style="width:200px;margin-bottom: 12px;margin-right: 10px">
      <Option value="residential">小区</Option>
      <Option value="garden">网格</Option>
      <Option value="building">楼</Option>
    </Select>
  </template>
  <Select placeholder="请选择迁移前区" v-model="params.old_area_id" style="width:200px;margin-bottom: 12px;margin-right: 10px">
    <Option v-for="item in areaList11" :value="item.id" :key="item.id">{{ item.name }}</Option>
  </Select>
  <Select placeholder="请选择迁移后区" v-model="params.new_area_id" style="width:200px;margin-bottom: 12px;margin-right: 10px">
    <Option v-for="item in areaList22" :value="item.id" :key="item.id">{{ item.name }}</Option>
  </Select>
  <Button type="success" style="margin-bottom: 12px;margin-right: 10px" @click="init">查询</Button>
  <Button type="primary" style="margin-bottom: 12px" @click="moveClick">发起迁移申请</Button>
  <Table class="tableMoveClass" border :columns="MoveTableColumns" :data="MoveTableData" :loading="tableLoading">
    <template slot-scope="{ row, index }" slot="action">
<!--      {{row.state}}-->
      <Button
          v-if="severUserInfo.company_grade === '2' && row.state === '0'"
          @click="updateQyApplyTY(row)"
          type="success" size="small" style="margin-right: 5px">审批通过</Button>
      <Button
          v-if="severUserInfo.company_grade === '2' && row.state === '0'"
          @click="QyApplyBH(row)"
          type="error" size="small" style="margin-right: 5px">审批驳回</Button>
      <Button
          v-if="(severUserInfo.company_grade === '2' || severUserInfo.company_grade === '3') && row.state === '0'"
          @click="QyApplyQX(row)"
          type="primary" size="small">撤销申请</Button>
      <Button
          v-if="row.state === '3' && severUserInfo.company_grade === '2'"
          @click="getRefuseReason(row)"
          type="primary" size="small">查看撤销原因</Button>
      <Button
          v-if="row.state === '2'"
          @click="getRefuseReason(row)"
          type="primary" size="small">查看驳回原因</Button>
    </template>
  </Table>
  <div style="margin-top: 12px;text-align: right">
    <template>
      <Page :current="params.pageNo" :total="params.totalRecord" show-sizer :page-size="params.pageSize" show-elevator
            @on-change="pageAction" @on-page-size-change="pageSizeChange"/>
    </template>
  </div>

  <Modal
      :mask-closable="false"
      width="1200"
      v-model="MoveModal.show"
      title="数据迁移"
      @on-ok="createQyApply">
    <div class="divtitleClass">
      选择迁移主体社区
    </div>
    <community-select ref="communitySelect" @callBack="callBack" style="margin-left: 10px"></community-select>

    <div class="divtitleClass">
      选择迁移主体类型
    </div>
    <div style="margin-left: 10px">
      <Select placeholder="请选择迁移主体" v-model="MoveModal.info.qy_type" style="width:164px">
        <Option value="residential">小区</Option>
        <Option value="garden">网格</Option>
        <Option value="building">楼</Option>
      </Select>
      <Button type="primary" style="margin-left: 10px" @click="findGridList">查询迁移主体信息</Button>
    </div>

    <div class="divtitleClass">
      选择迁移主体
    </div>
    <Select filterable placeholder="请选择迁移主体" v-model="MoveModal.info.qy_id" style="width: 90%;margin-bottom: 50px;margin-left: 10px">
      <Option v-for="(item,index) in oldCommunityTableData" :key="index" :value="item.id">
<!--        <span v-if="item.residential_name !== undefined">{{item.residential_name}}</span>-->
<!--        <span v-if="item.garden_name !== undefined">{{item.garden_name}}</span>-->
        {{item.residential_name}}
        {{item.garden_name}}
        {{ item.name }}</Option>
    </Select>

    <div class="divtitleClass">
      选择目标社区
    </div>
    <community-select-2 ref="communitySelect2" @callBack="callBack2" style="margin-left: 10px"></community-select-2>

    <div v-if="MoveModal.info.qy_type && MoveModal.info.qy_type !== 'residential'">
      <div class="divtitleClass">
        选择目标
        <span v-if="MoveModal.info.qy_type === 'garden'">小区</span>
        <span v-if="MoveModal.info.qy_type === 'building'">网格</span>
      </div>
      <Button type="primary" style="margin-left: 10px;margin-bottom: 10px" @click="findGridList2">查询目标信息</Button>
      <div>
        <Select @on-change="findGardenByMapList2('5.5', MoveModal.info.new_residential_id)"
                v-if="MoveModal.info.qy_type === 'garden' || MoveModal.info.qy_type === 'building'"
                v-model="MoveModal.info.new_residential_id" style="width: 90%;margin-bottom: 10px;margin-left: 10px">
          <Option v-for="(item,index) in newCommunityTableDataResidential" :key="index" :value="item.id">{{ item.name }}</Option>
        </Select>
      </div>
      <div>
        <Select v-if="MoveModal.info.qy_type === 'building'" v-model="MoveModal.info.new_garden_id" style="width: 90%;margin-bottom: 50px;margin-left: 10px">
          <Option v-for="(item,index) in newCommunityTableDataGarden" :key="index" :value="item.id">{{ item.name }}</Option>
        </Select>
      </div>
    </div>
  </Modal>
  <Modal
      v-model="refuseModal"
      title="填写原因"
      @on-ok="updateQyApply">
    <div style="text-align: center">
      <Input v-model="refuse_reason" maxlength="100" show-word-limit type="textarea" placeholder="填写原因" style="width: 300px" />
    </div>
  </Modal>
</div>
</template>

<script>
import CommunitySelect from '@/components/community-select/community-select'
import CommunitySelect2 from '../../../components/community-select/community-select'
import { newFindBuildingByMapList, newFindGardenByMapList, newFindResidentialByMapList } from '../../../api/z-new-grid'
import {
  createQyApply,
  findQYApplyList,
  findSubordinateList,
  updateQyApply,
  updateQyApplyBH,
  updateQyApplyQX
} from '../../../api/eventlist'
export default {
  name: 'index',
  components: { CommunitySelect, CommunitySelect2 },
  data () {
    return {
      severUserInfo: {},
      MoveTableColumns: [
        {
          title: '迁移编码',
          key: 'code',
          fixed: 'left',
          width: 170,
          align: 'center'
        },
        {
          title: '迁移主体类型',
          key: 'qy_type_name',
          fixed: 'left',
          width: 80,
          align: 'center'
        },
        {
          title: '迁移主体',
          key: 'qy_id_name',
          fixed: 'left',
          width: 170,
          align: 'center'
        },
        {
          title: '审批状态',
          key: 'state_name',
          fixed: 'left',
          width: 120,
          align: 'center'
        },
        {
          title: '迁移前区',
          key: 'old_area_name',
          width: 100,
          align: 'center'
        },
        {
          title: '迁移前街道',
          key: 'old_street_name',
          width: 130,
          align: 'center'
        },
        {
          title: '迁移前社区',
          key: 'old_community_name',
          width: 180,
          align: 'center'
        },
        {
          title: '迁移前小区',
          key: 'old_residential_name',
          width: 180,
          align: 'center'
        },
        {
          title: '迁移前网格',
          key: 'old_garden_name',
          width: 180,
          align: 'center'
        },
        {
          title: '迁移后区',
          key: 'new_area_name',
          width: 100,
          align: 'center'
        },
        {
          title: '迁移后街道',
          key: 'new_street_name',
          width: 130,
          align: 'center'
        },
        {
          title: '迁移后社区',
          key: 'new_community_name',
          width: 190,
          align: 'center'
        },
        {
          title: '迁移后小区',
          key: 'new_residential_name',
          width: 180,
          align: 'center'
        },
        {
          title: '迁移后网格',
          key: 'new_garden_name',
          width: 180,
          align: 'center'
        },
        {
          title: '申请时间',
          key: 'create_time',
          fixed: 'right',
          width: 150,
          align: 'center'
        },
        // {
        //   title: '审批时间',
        //   key: 'update_time',
        //   fixed: 'right',
        //   width: 150,
        //   align: 'center'
        // },
        {
          title: '操作',
          slot: 'action',
          width: 250,
          align: 'center',
          fixed: 'right'
        }
      ],
      MoveTableData: [],
      MoveModal: {
        show: false,
        info: {
          old_area_id: '',
          old_street_id: '',
          old_community_id: '',
          // old_residential_id: '',
          // old_garden_id: '',
          qy_type: '',
          qy_id: '',
          new_area_id: '',
          new_street_id: '',
          new_community_id: '',
          new_residential_id: '',
          new_garden_id: ''
        }
      },
      oldCommunityTableData: [],
      newCommunityTableDataResidential: [],
      newCommunityTableDataGarden: [],
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      refuseModal: false,
      refuse_reason: '',
      refuseinfo: {},
      state: '',
      tableLoading: true,
      areaList11: [],
      areaList22: []
    }
  },
  methods: {
    moveClick () {
      this.MoveModal.info.qy_id = ''
      this.MoveModal.info.qy_type = ''
      this.MoveModal.info.old_area_id = ''
      this.MoveModal.info.old_street_id = ''
      this.MoveModal.info.old_community_id = ''
      this.MoveModal.info.new_area_id = ''
      this.MoveModal.info.new_street_id = ''
      this.MoveModal.info.new_community_id = ''
      this.MoveModal.info.new_residential_id = ''
      this.MoveModal.info.new_garden_id = ''
      this.MoveModal.show = true
      this.$refs.communitySelect.init(this.severUserInfo)
      this.$refs.communitySelect2.init({ company_grade: '2', company_id: '999999999' })
    },
    callBack (e) {
      console.log('callBack', e)
      this.MoveModal.info.old_area_id = e.area_id
      this.MoveModal.info.old_street_id = e.street_id
      this.MoveModal.info.old_community_id = e.community_id
      // if (e.type === 'area') {
      //   this.MoveModal.info.old_area_id = e.area_id
      // }
      // if (e.type === 'street') {
      //   this.MoveModal.info.old_street_id = e.street_id
      // }
      // if (e.type === 'community') {
      //   this.MoveModal.info.old_community_id = e.community_id
      // }
    },
    callBack2 (e) {
      // console.log('callBack2', e)
      this.MoveModal.info.new_area_id = e.area_id
      this.MoveModal.info.new_street_id = e.street_id
      this.MoveModal.info.new_community_id = e.community_id
      // if (e.type === 'area') {
      //   this.MoveModal.info.new_area_id = e.area_id
      // }
      // if (e.type === 'street') {
      //   this.MoveModal.info.new_street_id = e.street_id
      // }
      // if (e.type === 'community') {
      //   this.MoveModal.info.new_community_id = e.community_id
      // }
    },
    findGridList () {
      if (this.MoveModal.info.qy_type === 'residential') {
        this.findResidentialByMapList('5', this.MoveModal.info.old_community_id)
      }
      if (this.MoveModal.info.qy_type === 'garden') {
        this.findGardenByMapList('5', this.MoveModal.info.old_community_id)
      }
      if (this.MoveModal.info.qy_type === 'building') {
        this.findBuildingByMapList('5', this.MoveModal.info.old_community_id)
      }
    },
    findGridList2 () {
      // if (this.MoveModal.info.qy_type === 'garden') {
      //   this.findResidentialByMapList2('5', this.MoveModal.info.new_community_id)
      // }
      // if (this.MoveModal.info.qy_type === 'building') {
      //   this.findResidentialByMapList2('5', this.MoveModal.info.new_community_id)
      //   this.findGardenByMapList2('5.5', this.MoveModal.info.new_residential_id)
      // }
      this.findResidentialByMapList2('5', this.MoveModal.info.new_community_id)
    },
    findResidentialByMapList2 (e1, e2) {
      let data = {
        grade: e1,
        id: e2
      }
      newFindResidentialByMapList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.newCommunityTableDataResidential = ret.data.data
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    },
    findGardenByMapList2 (e1, e2) {
      let data = {
        grade: e1,
        id: e2
      }
      newFindGardenByMapList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.newCommunityTableDataGarden = ret.data.data
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    },
    findResidentialByMapList (e1, e2) {
      let data = {
        grade: e1,
        id: e2
      }
      newFindResidentialByMapList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.oldCommunityTableData = ret.data.data
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    },
    findGardenByMapList (e1, e2) {
      let data = {
        grade: e1,
        id: e2
      }
      newFindGardenByMapList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.oldCommunityTableData = ret.data.data
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    },
    findBuildingByMapList (e1, e2) {
      let data = {
        grade: e1,
        id: e2
      }
      newFindBuildingByMapList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.oldCommunityTableData = ret.data.data
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    },
    createQyApply () {
      let data = this.MoveModal.info
      createQyApply(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '申请成功！', desc: ret.data.errmsg })
          this.init()
        } else {
          this.$Notice.error({ title: '申请失败！', desc: ret.data.errmsg })
        }
      })
    },
    init () {
      this.tableLoading = true
      let data = this.params
      findQYApplyList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.params.totalRecord = ret.data.data.totalRecord
          this.MoveTableData = ret.data.data.results
          this.tableLoading = false
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    },
    pageAction (page) {
      this.params.pageNo = page
      this.init()
    },
    pageSizeChange (e) {
      this.params.pageSize = e
      this.init()
    },
    QyApplyBH (e) {
      this.refuse_reason = ''
      this.refuseModal = true
      this.refuseinfo = e
      this.state = '2'
    },
    QyApplyQX (e) {
      this.refuse_reason = ''
      this.refuseModal = true
      this.refuseinfo = e
      this.state = '3'
    },
    updateQyApply () {
      if (this.state === '2') {
        let data = {
          code: this.refuseinfo.code,
          refuse_reason: this.refuse_reason
        }
        updateQyApplyBH(data).then(ret => {
          if (ret.data.errcode === 0) {
            this.$Notice.success({ title: '撤销成功！', desc: ret.data.errmsg })
            this.init()
          } else {
            this.$Notice.error({ title: '撤销失败！', desc: ret.data.errmsg })
          }
        })
      }
      if (this.state === '3') {
        let data = {
          code: this.refuseinfo.code,
          refuse_reason: this.refuse_reason
        }
        updateQyApplyQX(data).then(ret => {
          if (ret.data.errcode === 0) {
            this.$Notice.success({ title: '撤销成功！', desc: ret.data.errmsg })
            this.init()
          } else {
            this.$Notice.error({ title: '撤销失败！', desc: ret.data.errmsg })
          }
        })
      }
    },
    getRefuseReason (e) {
      this.refuseModal = true
      this.refuse_reason = e.refuse_reason
    },
    updateQyApplyTY (e) {
      this.tableLoading = true
      let data = {
        code: e.code
      }
      updateQyApply(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '审批成功！', desc: ret.data.errmsg })
          this.tableLoading = false
          this.init()
        } else {
          this.$Notice.error({ title: '审批失败！', desc: ret.data.errmsg })
        }
      })
    },
    findDistrictList () {
      let data = {
        grade: 2,
        id: '999999999'
      }
      findSubordinateList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.areaList11 = ret.data.data
          this.areaList22 = ret.data.data
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.errmsg
          })
        }
      })
    }
  },
  mounted () {
    this.severUserInfo = this.$store.state.user.severUserInfo
    this.init()
    this.findDistrictList()
  },
  watch: {
    'MoveModal.info.qy_type': function (newV, oldV) {
      if (newV !== oldV) {
        try {
          this.MoveModal.info.qy_id = ''
          this.oldCommunityTableData = []
          this.MoveModal.info.new_residential_id = ''
          this.MoveModal.info.new_garden_id = ''
          this.newCommunityTableDataResidential = []
          this.newCommunityTableDataGarden = []
        } catch (e) {
          // console.log('infoWindowObject.id', e)
        }
      }
    }
  }
}
</script>

<style>
.divtitleClass{
  background-color: rgb(236, 248, 255);
  border-left: 5px solid rgb(80, 191, 255);
  border-radius: 4px;
  font-size: 16px;
  margin: 15px 0px;
  padding: 8px 12px;
  width: 100%;
}

.custom-radio {
  font-size: 18px;
  cursor: pointer;
  user-select: none;
}
::-webkit-scrollbar {
  /*display: none;*/
  /*width: 10px;*/
  height: 10px;
}
/*::-webkit-scrollbar-track {*/
/*  border-radius: 10px;*/
/*}*/
/*::-webkit-scrollbar-thumb {*/
/*  background-color: #007acc;*/
/*}*/
</style>
